<template>
  <div class="home">
    <!-- 面试题：页面出现弹框(如果这里的搜索页)的时候，弹框后看见底层页面内容，·如何解决？ -->
    <transition name="van-fade">
      <!-- 解决方法：给首页的内容套一个div，使用v-show通过路径来决定是否显示。
                    为了避免突然消失，外加一个过渡决绝立即消失问题
       -->
      <!-- 首页展示内容 -->
      <div v-if="$route.path=== '/home' ">

        <!-- 顶部搜索框 -->
        <van-search shape="round" placeholder="请输入搜索关键词" disabled @click="toSearchPage" />

        <!-- 轮播图 -->
        <Swiper :bannerList="bannerList" />

        <!-- 表格栏 -->
        <Grid :gridsList="gridsList" />

        <!-- 品牌制造商 -->
        <Brand :brandList="brandList" />

        <!-- 新品 -->
        <NewGoods :newGoodsList="newGoodsList" />

        <!-- 人气 -->
        <Hot :hotGoodsList="hotGoodsList" />

        <!-- 专题 -->
        <Topic :topicList="topicList" />

        <!-- 分类商品列表 -->
        <CategoryList :categoryList="categoryList" />

      </div>
    </transition>

    <!-- 黑色遮罩层 -->
    <transition name="van-fade">
      <div class="popup-shadow" v-show="isShowShadow"></div>
    </transition>

    <!-- 展示搜索页 -->
    <!-- <transition name="slide">
      <router-view></router-view>
    </transition> -->

    <!-- 使用vant提供的动画 -->
    <transition name="van-slide-right">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
  // 请求api相关
  import {
    getHomeLists
  } from "@/request/homeApi.js";

  // vuex相关
  import {
    mapState,
    mapMutations
  } from "vuex";

  // 组件相关
  import Swiper from '@/components/home/Swiper.vue'
  import Grid from '@/components/home/Grid.vue'
  import Brand from '@/components/home/Brand.vue'
  import NewGoods from '@/components/home/NewGoods.vue'
  import Hot from '@/components/home/Hot.vue'
  import Topic from '@/components/home/Topic.vue'
  import CategoryList from '@/components/home/CategoryList.vue'
  export default {
    name: "home",
    components: {
      Swiper,
      Grid,
      Brand,
      NewGoods,
      Hot,
      Topic,
      CategoryList
    },
    props: {},
    data() {
      return {
        bannerList: [],
        gridsList: [],
        brandList: [],
        topicList: [],
        hotGoodsList: [],
        newGoodsList: [],
        categoryList: []
      };
    },
    computed: {
      ...mapState({
        isShowShadow: (state) => state.showShadow.isShowShadow,
      }),
    },
    methods: {
      ...mapMutations({
        chanIsShowShadow: "showShadow/chanIsShowShadow",
      }),
      // 点击搜索框跳转
      toSearchPage() {
        this.$router.push("/home/searchPopup");
        // 改变vuex中IsShowShadow标识
        this.chanIsShowShadow(true);
      },
    },
    watch: {
      // 注意这里不是路由守卫  只是监听父子级关系路由的变化
      $route(to, from) {
        if (to.path === '/home') {
          this.chanIsShowShadow(false)
        }
      }
    },
    async created() {
      // async + await 处理异步函数嵌套异步函数的终极写法
      // async在生命函数或者是普通函数都可以！
      let res = await getHomeLists()

      let {
        banner,
        channel,
        brandList,
        newGoodsList,
        topicList,
        hotGoodsList,
        categoryList
      } = res.data;
      this.bannerList = banner
      this.gridsList = channel
      this.topicList = topicList
      this.newGoodsList = newGoodsList
      this.hotGoodsList = hotGoodsList
      this.brandList = brandList
      this.categoryList = categoryList

      // getHomeLists().then((res) => {
      //   if (res.errno == 0) {
      //     let { banner,channel,brandList,newGoodsList,topicList,hotGoodsList,categoryList } = res.data;
      //     this.bannerList = banner
      //     this.gridsList = channel
      //     this.topicList = topicList
      //     this.newGoodsList= newGoodsList
      //     this.hotGoodsList = hotGoodsList
      //     this.brandList = brandList
      //     this.categoryList = categoryList
      //   }
      // })
    },
    mounted() {},
  };
</script>

<style scoped lang="less">
  .home {
    padding-bottom: .5rem;
  }

  /*  Vue的过渡效果写法 */
  /*  进入过渡到初始状态，以及离开过渡的结束状态 */
  .slide-enter,
  .slide-leave-to {
    right: -100%;
  }

  /*  过渡时间设置 */
  .slide-enter-active,
  .slide-leave-active {
    transition: all 0.2s linear;
  }

  /* 进入过度的结束状态，以及离开过渡的初始状态 */
  .slide-enter-to,
  .slide-leave {
    right: 0;
  }

  .popup-shadow {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1;
  }
</style>